<template>
	<div class="a">									
		<van-popup
		  v-model="moreInfo"
		  position="right"
		  :style="{ height: '100%',width:'100%'}"
		>   
		    <!--头部-->
			<van-nav-bar
			  title="更多信息"
			  left-arrow
			  
			>		
			  <van-icon name="arrow-left" @click="cancle" slot="left" color="#000" size="20"/>
			  <div  slot="right">
			  	<van-button round type="info"  size="small" @click="confimMoreInfo"
			  		class="release">确认</van-button>
			  </div>	       
		    </van-nav-bar>		
		    
		    <!--选择分类-->		    
            <van-cell title="分类" is-link :value="mainCategory" 
            	size="large" icon="bar-chart-o" class="borderCell"
            	@click="selectCategory"
            />
	           
	        
	        <!--分类选择器-->
			<van-popup v-model="showCategory" position="bottom">
			  <van-picker
			  	ref="category"
			    show-toolbar
			    title="请选择分类"
			    :columns="columns"
			    @cancel="showCategory = false"
			    @confirm="changeCategory"
			    value-key="categoryName"
			    :default-index="defaultIndex"
			  >
			  </van-picker>
			</van-popup>
			
			<div class="moreInfoTitle">
			  	<span class="blod">常用选项</span>
			</div>
			
			<!--是否可讲价-->
		    <h2 class="moreInfo_h2">是否可讲价</h2>  
		    <van-radio-group v-model="goodsIsprice" style="padding: 0 10px;">
			  <van-row>	
			  	 <van-col span="6" class=" mb10">
			  	 	<van-radio name="0" icon-size="16" checked-color="#07c160">不讲价</van-radio>
			  	 </van-col>
			     <van-col span="6" class=" mb10">
			     	<van-radio name="1" icon-size="16" checked-color="#07c160">可讲价</van-radio>
			     </van-col>			  
			  </van-row>
		    </van-radio-group>	
		    
		    <!--是否全新-->
		    <h2 class="moreInfo_h2">是否全新</h2>  
		    <van-radio-group v-model="goodsIsnew" style="padding: 0 10px;"> 
			  <van-row>	
			  	 <van-col span="6" class="mb10">
			  	 	<van-radio name="0" icon-size="16" checked-color="#07c160">半新</van-radio>
			  	 </van-col>
			     <van-col span="6" class="mb10">
			     	<van-radio name="1" icon-size="16" checked-color="#07c160">全新</van-radio>
			     </van-col>			  
			  </van-row>
		    </van-radio-group>	
		    	
		    <!--交易方式-->	
		    <h2 class="moreInfo_h2">交易方式</h2>  
		    <van-radio-group v-model="trade_type" style="padding: 0 10px;">
			  <van-row>	
			     <van-col span="6" class=" mb10">
			     	<van-radio name="1" icon-size="16" checked-color="#07c160">自提</van-radio>
			     </van-col>	
			     <van-col span="6" class=" mb10">
			     	<van-radio name="2" icon-size="16" checked-color="#07c160">邮寄</van-radio>
			     </van-col>				     
			  </van-row>
		    </van-radio-group>		   	    
		</van-popup>		
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
       	  defaultIndex:0,
          mainCategory:'请选择分类',
          showCategory:false,
       	  url3:this.$api+'/marketorderservice/api/v1/market/category/listVo', // 所有1级分类列表
       	  columns: [],  
       	  goodsIsprice:'', // 是否讲价
       	  goodsIsnew:'', // 是否全新
       	  trade_type:'', // 交易方式       
       	  categoryId:'', // 1级分类ID
       }
	},
    props:{
	    moreInfo: {
	      type: Boolean,
	      default: false
	    }   	
    },
	methods: {	
	   editInit(categoryName,goodsIsprice,goodsIsnew,trade_type){
	   	 this.mainCategory=categoryName
	   	 this.goodsIsprice=goodsIsprice.toString()
	   	 this.goodsIsnew=goodsIsnew.toString()
	   	 this.trade_type=trade_type.toString()
	   },
	   // 关闭弹框	
       cancle(){
       	  this.$emit('moreInfoCancle')
       },
       // 选择1级分类
       selectCategory(){
       	  this.showCategory=true
       },
       // 获取分类列表
	   init(){
		  let that=this	
	      this.$Axios.Post(this.url3, {"parentId":0,"counts":0,"status":"0"})
	      .then(function(res) {
	      	that.columns=res.categoryList  
	      })	   	
	   },
	   // 确认1级分类
	   changeCategory(res){
			this.categoryId=res.categoryId	
			this.showCategory=false
			this.mainCategory=res.categoryName
	   },
	   // 修改交易方式
       changeTradeType(res){
           let arr=this.changeInfo()
           this.mainMoreInfo=this.mainMoreInfo.concat(arr)	           
       },
       //  拼接字段
	   changeInfo(){
			let arr=[];
			if(this.goodsIsprice){
				let str1=this.goodsIsprice==0?'不讲价':'可讲价'
				arr.push(str1)
			}
			if(this.goodsIsnew){
				let str2=this.goodsIsnew==0?'半新':'全新'
				arr.push(str2)
			}
			if(this.trade_type){
				let str3=this.trade_type==1?'自提':'邮寄'
				arr.push(str3)
			}
			return arr
	   },       
	   // 确认更多信息
	   confimMoreInfo(){
	   	  let str=this.changeInfo().join(',')
	   	  if(this.mainCategory!='请选择分类'){
	   	  	str=this.mainCategory+' '+str
	   	  }
		  let obj={
		  	categoryId:this.categoryId,
       	    goodsIsprice:this.goodsIsprice, 
       	    goodsIsnew:this.goodsIsnew, 
       	    trade_type:this.trade_type  		  	
		  }
		  this.$emit('confirmMoreInfo',obj,str)		  
	   }
		        
			   
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.init()
	}
}	
</script>

<style scoped="">
.a{position: relative;}
.release{background: #fef723;border:none;color: #333;font-weight: bold;}
.moreInfoTitle{padding: 10px;font-size: 18px;font-weight: bold;
display: flex;justify-content: space-between;}
.mb10{margin-bottom: 10px;}
.moreInfo_h2{padding: 10px;font-size: 14px;}
</style>